<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title></title>

	<style type="text/css">
        html, body{
            width:100%;
            height:100%;
            margin:0;
            padding:0;
            overflow:hidden;
        }
		#canvas {
            width:100%;
            height:100%;
		}
	</style>

    <script type="x-shader/x-vertex" id="vertexshader">
        attribute float size;
        attribute vec3 customColor;

        varying vec3 vColor;

        void main() {
            vColor = customColor;
            vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
            gl_PointSize = size * ( 300.0 / length( mvPosition.xyz ) );
            gl_Position = projectionMatrix * mvPosition;
        }
    </script>
    <script type="x-shader/x-fragment" id="fragmentshader">
        uniform vec3 color;
        uniform sampler2D texture;

        varying vec3 vColor;

        void main() {
            gl_FragColor = vec4( color * vColor, 0.5 );
            gl_FragColor = gl_FragColor * texture2D( texture, gl_PointCoord );
        }
    </script>

</head>

<body>

	<div id="canvas"></div>

	<!-- library -->
    <script type="text/javascript" src="//apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
	<script type="text/javascript" src="js/three.min.js"></script>
	<script type="text/javascript" src="../build/mapv.3d.js"></script>
	<script type="text/javascript">
		var canvas = document.querySelector('#canvas');
		var flate = new mapv.Earth(canvas);
	</script>

</body>

</html>
